<template>
    <div>
        <el-form ref="UserInfoForm" :model="UserInfoForm" class="UserInfoContainer" label-width="80px" >
            <el-form-item>
                <el-avatar :size="100"  style="display:block;margin:10px 100px" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
            </el-form-item>
            <el-form-item prop="userName" label=" 用户名：">
                <el-col :span="20">
               <el-input v-model="UserInfoForm.userName" :disabled="true" ></el-input>
                </el-col>
            </el-form-item>
          <el-form-item prop="email" label=" 邮箱:   ">
            <el-col :span="20">
              <el-input  v-model="UserInfoForm.email" :disabled="true" ></el-input>
            </el-col>
          </el-form-item>
            <el-form-item prop="status" label=" 身份:   ">
                <el-col :span="20">
                <el-input  v-model="role" :disabled="true" ></el-input>
                </el-col>
            </el-form-item>
            <el-form-item prop="describe" label=" 描述：">
                <el-col :span="20">
               <el-input  v-model="describe" :disabled="true" :span="8"></el-input>
                </el-col>
            </el-form-item>
          <el-row >
            <el-button  @click.native.prevent="go" style="display:block;margin:0 auto">修改信息</el-button>
          </el-row>
        </el-form>
      <el-dialog title='人脸采集' :visible.sync="visible" :before-close="close">
        <img id="video" :src="source" width="100%" height="400px" >
<!--        <iframe :src="source" width="100%" height="600px"></iframe>-->
      </el-dialog>
    </div>
</template>

<script>
    import {getUserInfo} from "@/api/userApi";
    export default {
        name: "UserInfoForm",
        data(){
            return{
                id:0,
                source:"",
                visible:false,
                role:'管理员',
                describe:'系统管理者',
                UserInfoForm:{
                    userName:'',
                    email: '',
                    role:'',
                    describe:'',
                    privilege:'',
                },

            }
        },
        methods:{
          go(){
            this.$router.push('/home/modifyInfo');
          },
          collect(id){
            this.source = 'http://127.0.0.1:5000/worker/collecting_faces?id='+id;
            this.visible = true;
          },
          close(){
            this.source = ''
            this.visible = false;
          }
        },
      created() {
        getUserInfo(window.sessionStorage.getItem('token')).then(res => {
            this.UserInfoForm.userName = res.result.name;
            this.UserInfoForm.email = res.result.email;
        }).catch(err=>{
          console.log(err);
        })
      }
    }
</script>

<style scoped>
    .UserInfoContainer{
        border-radius: 15px;
        background-clip: padding-box;
        margin:18px auto;
        width:500px;
        padding: 20px 35px 20px 35px;
        background: #fff;
    }

    .Avatar{
        margin: auto;
    }
    .add_bu{
        margin: auto;
        min-width: 56px;
        min-height: 28px;
    }

</style>
